<template>
  <div class="comitem icon">
    <el-input
      type="textarea"
      placeholder="请输入内容"
      minlength="2"
      maxlength="150"
      show-word-limit
      resize="none"
      rows="3"
      style="width:100%"
      v-model="content"
      id="text"
    />
    <div class="combottom">
      <img
        class="emoji-panel-btn"
        src="/images/face.png"
        @click="showEmoji = !showEmoji"
      />
      <div class="two">
        <el-input
          type="text"
          style="width:60%"
          placeholder="用户名"
          minlength="2"
          maxlength="8"
          class="post"
          v-model="fromUser"
          v-if="!disabled"
        />
        <el-button type="primary" @click="postComment">发表评论</el-button>
      </div>
      <emoji-panel
        :top="top"
        :left="left"
        @emojiClick="appendEmoji"
        v-if="showEmoji"
      ></emoji-panel>
    </div>
  </div>
</template>
<script>
import EmojiPanel from "../emoji/EmojiPanel"
export default {
  data() {
    return {
      showEmoji: false,
      content: "",
      fromUser: "",
      disabled: false,
    }
  },
  created() {
    // console.log(this.from)
  },
  props: ["top", "left"],
  mounted() {
    this.disabled = this.$store.state.isLogin
  },
  components: {
    EmojiPanel,
  },
  methods: {
    postComment() {
      this.content = this.content.replace(/:.*?:/g, this.emoji) // 替换":"符号包含的字符串,通过emoji方法生成表情<span></span>
      let fromUser = {}
      if (this.$store.state.isLogin) {
        fromUser = {
          name: "博主",
          isAuthor: true,
        }
      } else {
        if (this.fromUser == "" || this.content == "") {
          this.$notify.error({
            title: "错误",
            message: "用户名或者评论不能为空",
          })
          return
        } else {
          fromUser = {
            name: this.fromUser,
            isAuthor: false,
          }
        }
      }
      this.$emit("handleCom", {
        fromUser,
        c_content: this.content,
        c_date: new Date(),
      })
      this.content = ""
      this.fromUser = ""
      this.showEmoji = false
    },
    emoji(word) {
      // 生成html
      const type = word.substring(1, word.length - 1)
      return `<span class="emoji-item-common emoji-${type} emoji-size-small" ></span>`
    },
    // EmojiPanel触发的事件
    appendEmoji(text) {
      const el = document.getElementById("text")
      this.content = el.value + ":" + text + ":"
      this.showEmoji = false
    },
  },
}
</script>
<style lang="scss" scoped>
.comitem {
  margin: 10px 0px;
  width: 100%;
  .combottom {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    .one {
      width: 5%;
    }
    .two {
      width: 95%;
      text-align: right;
    }
    .post {
      margin: 0px 20px;
    }
  }
}
.icon {
  line-height: 40px;
  .emoji-panel-btn {
    position: relative;
    display: inline-block;
    height: 35px;
    width: 35px;
    vertical-align: middle;
    &:hover {
      cursor: pointer;
      opacity: 0.8;
    }
  }
  .iconfont {
    cursor: pointer;
    color: #f7ba2a;
    vertical-align: bottom;
  }
  .emoji-box {
    position: absolute;
    z-index: 10;
    left: 0px;
    top: -125px;
    box-shadow: 0 4px 20px 1px rgba(0, 0, 0, 0.2);
    background: white;
    .btn {
      position: absolute;
      border: none;
      right: 5px;
      top: 5px;
      z-index: 10;
    }
    .btn:hover {
      cursor: pointer;
      color: red;
    }
    .arrow {
      left: 10px;
    }
  }
}
</style>
